<template>
  <header>
    <h1>发货与配送</h1>
  </header>
  <main>
    <!-- 配送信息查询 -->
    <section id="delivery-query">
      <h2>配送信息查询</h2>
      <form id="delivery-form">
        <div class="form-group">
          <label for="order-number">订单号</label>
          <input type="text" id="order-number" name="order-number" placeholder="请输入您的订单号" />
        </div>
        <button type="submit">查询</button>
      </form>
      <div id="delivery-status" class="status-message" style="display: none">
        <p>
          订单号：
          <span id="order-id"></span>
        </p>
        <p>
          配送状态：
          <span id="status"></span>
        </p>
      </div>
    </section>

    <!-- 配送区域说明 -->
    <section id="delivery-areas">
      <h2>配送区域说明</h2>
      <ul>
        <li>我们支持全国范围内配送。</li>
        <li>部分偏远地区可能会有额外的配送费用，请咨询客服了解详情。</li>
        <li>国际配送请单独联系客户服务。</li>
      </ul>
    </section>

    <!-- 配送方式选择 -->
    <section id="delivery-options">
      <h2>配送方式选择</h2>
      <div class="delivery-option">
        <h3>标准配送</h3>
        <p>费用：¥10</p>
        <p>预计到达时间：3-5个工作日</p>
      </div>
      <div class="delivery-option">
        <h3>加急配送</h3>
        <p>费用：¥20</p>
        <p>预计到达时间：1-2个工作日</p>
      </div>
      <div class="delivery-option">
        <h3>同城快递</h3>
        <p>费用：¥15</p>
        <p>预计到达时间：当日送达</p>
      </div>
    </section>

    <!-- 常见问题 -->
    <section id="faq">
      <h2>常见问题</h2>
      <div class="accordion">
        <button class="accordion-btn" @click="ques1 = !ques1">问题1：如何查询我的配送状态？</button>
        <div v-if="ques1" class="accordion-panel">
          <p>您可以通过订单号在本页面顶部的查询工具中输入订单号进行查询。</p>
        </div>
        <button class="accordion-btn" @click="ques2 = !ques2">问题2：配送费用是多少？</button>
        <div v-if="ques2" class="accordion-panel">
          <p>标准配送费用为¥10，加急配送为¥20，同城快递为¥15。</p>
        </div>
        <button class="accordion-btn" @click="ques3 = !ques3">
          问题3：我的订单可以送到国外吗？
        </button>
        <div v-if="ques3" class="accordion-panel">
          <p>目前支持国际配送，但需要额外的费用，请联系我们的客户服务了解详细信息。</p>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <img src="../../assets/logo.png" alt="品优购" />
    <p>品优购 &copy; 2024</p>
  </footer>
</template>

<script setup>
import { ref, watch } from 'vue'

const ques1 = ref(false)
const ques2 = ref(false)
const ques3 = ref(false)

watch(ques1, () => {
  console.log(ques1.value, ques2.value, ques3.value)
})
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

h1 {
  margin: 0;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 30px;
}

h2 {
  color: #333;
}

ul {
  list-style: none;
  padding: 0;
}

footer {
  color: #999;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Accordion styles */
.accordion-panel {
  padding: 10px;
}

.accordion-btn {
  background-color: #f4f4f4;
  color: #333;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.accordion-btn:hover {
  background-color: #ddd;
}

.active {
  background-color: #ddd;
}

img {
  width: 500px;
  height: 100px;
  object-fit: cover;
}

a {
  color: #999;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type='text'] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #218838;
}

.status-message {
  margin-top: 20px;
  padding: 15px;
  background-color: #e9f7ef;
  border: 1px solid #28a745;
  border-radius: 4px;
}

.delivery-option {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.delivery-option h3 {
  margin-top: 0;
}
</style>
